<script>
export default {
  name: 'login'
}
</script>
<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { getTime } from '@/utils/time'
import setting from '@/setting.js'
import { userInfo } from '@/model/index'

const { isDialog } = defineProps(['isDialog'])
const $edits = defineEmits(['confirm'])

const $route = useRoute()
const $router = useRouter()

// 表单数据收集
const formData = ref({
  username: 'admin',
  password: '111111'
})
const loginFormRef = ref()

const validateUserName = function name(rule, value, callback) {
  if (value.length === 0) {
    callback(new Error('请输入用户名'))
  } else {
    callback()
  }
}
const validatePassword = function name(rule, value, callback) {
  if (value.length === 0) {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

const loginFormRules = reactive({
  username: [{ validator: validateUserName, trigger: 'change' }],
  password: [{ validator: validatePassword, trigger: 'blur' }]
})

// 请求登录
async function reqLogin(formRef) {
  try {
    if (!formRef) return
    await formRef.validate()

    await userInfo.login(formData.value)
    // 是否是弹窗模式
    if (isDialog) {
      if (userInfo.vm.status !== 2) await userInfo.load()
      // 弹窗模式 ——> 关闭弹窗
      $edits('confirm')
    } else {
      // 登录页模式 ——> 跳转首页
      // if ($route.query.redirect) {
      //   $router.push({ path: $route.query.redirect })
      // } else {
      $router.push({ name: 'Home' })
      // }
      ElNotification.success({
        title: `HI,${getTime()}好`,
        message: '欢迎回来'
      })
    }
  } catch (error) {
    console.log(error)
    ElNotification.error(typeof error === 'object' ? '请检查表单是否有误' : error)
  }
}
</script>

<template>
  <div class="layout">
    <el-row>
      <el-col
        :span="12"
        :xs="0"
      >
      </el-col>
      <el-col
        :span="12"
        :xs="24"
      >
        <div class="formContainer">
          <h1>Hello</h1>
          <h2>欢迎来到{{ setting.title }}</h2>
          <el-form
            class="formClass"
            ref="loginFormRef"
            :model="formData"
            :rules="loginFormRules"
          >
            <el-form-item prop="username">
              <el-input
                type="text"
                :prefix-icon="User"
                v-model="formData.username"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                :prefix-icon="Lock"
                show-password
                v-model="formData.password"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="formBtn"
                @click="reqLogin(loginFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
// 开始
.layout {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: red;
  background: url('@/assets/images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.formContainer {
  background-color: rgba(250, 216, 142, 0.561);
  margin: 48% 10% auto 10%;
  padding: 2%;
  backdrop-filter: blur(8px);
  box-shadow: 0px 0px 100px rgb(198, 216, 184);

  h1,
  h2 {
    color: white;
  }
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2rem;
  }

  .formClass {
    padding: 20px 50px;
  }

  .formBtn {
    width: 100%;
  }
}
</style>
